<template>
    <myMoveBox ref="myMoveBoxDom" :attr="curAttr" :isClick="false">
        <template #show>
            <img style="width:30px;height:30px" src="@/static/icon/nail.svg" />
        </template>
        <template #hide>
            <div class="content b" @mousedown.stop="">
                <div class="text">{{ curData.name }}</div>
                <div class="category">
                    <div v-for="(item, index) in curData.categoryArr" :key="index">{{ item }}</div>
                </div>
            </div>
        </template>
    </myMoveBox>
</template>

<script setup>
import myMoveBox from '@/components/moveBox-v2/index-extra.vue'

const curAttr = {
    posiIndex: [0, 2],//起始下标
    whCount: [1, 1],//宽高长度
    zIndex: [990, 999],//图层
    backcolor: ['#409eff', '#409eff'],//背景颜色
    isClick: false,//默认点击
};

const state = ref(0);//[-1:等待倒计时回原位,0:待在原位,1:位移中,2:位移完成,3:鼠标在里面]
let timeout = null;
const curData = ref({});

const myMoveBoxDom = ref();
//#region 移动
const move = (x, y, data) => {
    if (state.value == 0) {
        //记录原位
        myMoveBoxDom.value.show({
            wh: [200, -1],
            xy: [x, y],
            showState: 1,
        });
    } else {
        myMoveBoxDom.value.show({
            wh: [200, -1],
            xy: [x, y],
            isLog: false,
            showState: 1,
        });
    }
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
        state.value = 2;
    }, 500);
    curData.value = data;
    curData.value.categoryArr = data.category.split(',');
}
const reset = (is = false) => {
    if (timeout) clearTimeout(timeout);
    state.value = -1;
    timeout = setTimeout(() => {
        if (is) {
            myMoveBoxDom.value.hide();
            state.value = 0;
            curData.value = {};
        } else if (state.value == -1) {
            myMoveBoxDom.value.hide();
            state.value = 0;
            curData.value = {};
        }
    }, is ? 100 : 1000);
}
//#endregion

defineExpose({
    move, reset,
})
</script>

<style lang="scss">
.content {
    width: 200px;
    border-radius: 7px;
    height: 100%;
    overflow: hidden;

    .category {
        color: #409eff;
        display: flex;
        flex-wrap: wrap;
        margin-top: 2px;
        padding-left: 5px;

        >div {
            padding: 0 5px;
            background: white;
            border-radius: 5px;
            margin: 0 5px 5px 0;
        }
    }

    .text {
        padding: 5px;
        color: white;
    }
}
</style>